<template>
    <div class="ads-dtData-content">
         <div class="scoll-view" v-if="requestOver">
            <div class="ads-left-con">
                <div class="title">
                    <span class="icon">?</span>
                    {{text1}}</div>
                <div class="place-view" :style="{backgroundImage:'url('+dtData.adArImg+')'}">
                </div>
            </div>
            <div class="ads-right-con">
                <div class="view-box">
                    <div class="logo">
                         <img :src="dtData.arLandmarkHeadImg" />
                    </div>
                    <div>
                        <div class="title" v-t="'usufruct.text2'">Location Landmark</div>
                        <div class="name">{{dtData.arLandmarkName}}</div>
                    </div>
                </div>
                <div class="ipt-view-item">
                    <div class="label" v-t="'usufruct.text3'">Transfer Object</div>
                    <div class="ipt-view">
                        <input type="text" v-model="saveForm.lesseeWalletAddress" maxlength="60" :placeholder="placeholder1" />
                        <div class="code" @click="btnCode"></div>
                    </div>
                </div>
                <div class="ipt-view-item">
                    <div class="label" v-t="'usufruct.text4'">Transfer Time</div>
                    <div class="ipt-view">
                        <input type="text" @click="show=true" v-model="saveForm.lesseeExpireDate" maxlength="20" :placeholder="placeholder2" />
                    </div>
                    
                </div>
 
                <div class="tip-view">
                     <img src="/images/detail/warn.png" />
                    {{text5}}
                </div>
                <div class="btn-view">
                     <div :class="'btn-confim '+lang" @click="btnSetUp"></div>
                </div>

            </div>
        </div> 
         <Popup :show="show" position="bottom">
                        <DatetimePicker
                                    v-model="dataTime"
                                    type="date"
                                    title="选择日期"
                                    :min-date="minDate"
                                    :max-date="maxDate"
                                     @confirm="onConfirm"
                                      @cancel="show = false"
                                    />
                        </Popup>
    </div>
</template>

<script>
import { reactive,toRefs,ref,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { toast,H5CallAPPFuction } from '@/utils/common'
import { DatetimePicker,Popup} from 'vant';
import { useI18n } from 'vue-i18n'

export default {
    components:{
        DatetimePicker,
        Popup
    },
    props:{
        detail:Object,
        id:'',
        type:{
            type:Number,
            default:1 // 1全球广告位详情，2广告位详情
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const addView = ref(null);
        const {proxy} = getCurrentInstance()
        const {t,locale} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            requestOver:false,
            dtData:props.detail, //  
            saveForm:{
                adPlaceId: '',
                lesseeExpireDate:'',
                lesseeWalletAddress:'',
                walletAddress: computed(()=>store.state.base.userInfo.walletAddress),
            },
            show:false,
            dataTime:new Date(),
             minDate: new Date(2020, 0, 1),
             maxDate: new Date(2025, 10, 1),
                text1:t('usufruct.text1'),
                text5:t('usufruct.text5'),
                placeholder1:t('usufruct.placeholder1'),
                placeholder2:t('usufruct.placeholder2'),
                lang:locale.value || 'en'
        })

        onMounted(()=>{
            console.log(route.query)
            if(route.query.id){
               state.saveForm.adPlaceId = route.query.id
                store.dispatch('ad/get_adspace_detail',route.query.id).then(res=>{
                    state.dtData = res.data
                    state.requestOver = true
                }) 
            }

            	// 定义scanQrResult方法，供app调用(接收扫码后的地址)
				window['scanQrResult'] = function (objStr) { // objStr:{url:''}
					const obj = objStr || ''
					console.log("obj:",obj)
					if(obj==''){
						return toast('Code  Is Null') // 没有处理结果
					}
					 state.saveForm.lesseeWalletAddress  = obj
				}
        })

         const btnSetUp = ()=>{
             
              store.dispatch('customer/setLessee',state.saveForm).then(res=>{
                 if(res.success){
                    toast('success')
                    setTimeout(() => {
                      window.history.go(-1)
                    }, 500);
                }else{
                    toast(res.message)
                }
            })
        }
        const onConfirm = (val)=>{
             let date = new Date(val)
             state.show=false
            state.saveForm.lesseeExpireDate= date.getFullYear()+'-'+getNumber(date.getMonth()+1)+'-'+getNumber(date.getDate())
        }

        const btnCode = ()=>{
             try {
                H5CallAPPFuction('scanQR','')   
                } catch (error) {
                    toast('调用app上传失败')
                } 
        }
        
        const getNumber=(val)=>{
            if(val>=10){
                return val
            }else{
                return '0'+val
            }
        }
        return{
            ...toRefs(state),
            btnSetUp,
            onConfirm,
            getNumber,
            btnCode
        }
    }
}
</script>

<style lang="scss" scoped>
    .ads-dtData-content{
        display: flex;
        width: 100%;
        height: 85%;
        line-height: normal;
        font-size: 22px;
        font-weight: 500;
        color: #FFFFFF;
        margin-top:50px;
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        // overflow: hidden;
        // overflow-x: auto;
        .scoll-view{
             display: flex;
            overflow-x: auto;
            -webkit-overflow-scrolling:touch;
            width: 100%;
           height: 100%;
        }
        .ads-left-con{
            overflow: hidden;
            overflow-y: auto;
            padding: 20px;
            width: 440px;
            background-image: url(/images/gloabAdSplace/bg1.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .title{
                color:#fff;
                font-size:24px;
                padding:10px 30px;
                position: relative;
                .icon{
                    position: absolute;
                    height:30px;
                    width:30px;
                    line-height:36px;
                    text-align: center;
                    border-radius:30px;
                    background-color: #67F8FF;
                    color:#333;
                    font-size:20px;
                    left:0;
                }
            }
              .place-view{
                display: flex;
                justify-content: flex-start;
                align-self: center;
                align-items: center;
                height:80%;
                padding:0 6px;
                margin: 0;
                background-position: center;
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

        }
        .ads-right-con{
            width: 800px;
            padding: 20px;
            margin-left:30px;
            overflow: hidden;
            overflow-y: auto;
             background-image: url(/images/gloabAdSplace/bg2.png);
            background-position: center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .view-box{
                display: flex;
                justify-content: flex-start;
                padding-top:10px;
                .logo{
                    img{
                        height:80px;
                        width:80px;
                        vertical-align: middle;
                        border:1px solid #67F8FF;
                    }
                }
                .title{
                    font-size: 28px;
                    font-weight: 600;
                    color: #67F8FF;
                    padding-left:20px;
                }
                .name{
                    font-size: 28px;
                    color: #fff;
                    padding-left:20px;
                    padding-top:2px;
                }
            }
            .ipt-view-item{
               .label{
                   font-size:24px;
                   color:#fff;
                   padding:10px 0;
               }
                .ipt-view{
                    border:1px solid #67F8FF;
                    height:60px;
                    line-height:60px;
                    width:100%;
                    overflow: hidden;
                    position: relative;
                    input{
                        background-color: transparent;
                        height:60px;
                        line-height:60px;
                        font-size:26px;
                        width:90%;
                        border:none;
                        padding:0 20px;
                    }
                    input::placeholder{
                        color:#ffffff80;
                        font-size:24px;
                    }
                    .code{
                        height:40px;
                        width:40px;
                         background-image: url(/images/detail/saoma.png);
                        background-position: center;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        position: absolute;
                        right:20px;
                        top:50%;
                        margin-top:-20px;
                        z-index: 9999;
                    }
                }
            }
            .tip-view{
                padding:20px 10px;
                font-size:20px;
                color: #67F8FF;
                img{
                    height:24px;
                }
            }
            .btn-view{
                display: flex;
                justify-content: flex-start;
                .btn-confim{
                    width: 160px;
                    height:60px;
                    background-image: url(/images/detail/confim.png);
                    background-position: center;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    margin:0 20px 0 0;
                    &.zh{
                        background-image: url(/images/detail/confim-zh.png); 
                    }
                }
            }
    }
}

</style>